<template>
  <div class="thermodynamic">
    <div id="container"></div>
  </div>
</template>

<script>
import loadBMap from "../js/loadGMap"

export default {
  name: "MapGg",
  data() {
    return {
      myMap: {},
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getHotspot()
    })
  },
  methods: {
    async getHotspot() {
      loadBMap("AIzaSyCesMmHHdksWoA9l4cQzDv2gKqzHZIWkac")
        .then(() => {
          this.myMap = new google.maps.Map(document.getElementById("container"), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8,
          })
        })
        .catch((err) => {
          console.log("地图加载失败")
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.thermodynamic {
  width: 100%;
  height: 100%;
  #container {
    width: 100%;
    height: 100%;
  }
}
</style>
